<template>
  <div>
    <el-table :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column
        v-loading="loading"
        align="center"
        label="tid"
        width="65"
        element-loading-text="请给我点时间！"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="300px" label="任务地点">
        <template slot-scope="{row}">
          <span>{{ row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column width="110px" align="center" label="是否完成">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="结束时间" width="95">
        <template slot-scope="scope">
          <span>{{ scope.row.pageviews }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.timestamp }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-button v-if="scope.row.author" type="primary" @click="handleSubmit(scope.row)">提交文档</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 隐藏的文件输入元素 -->
    <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      currentRow: null
    };
  },
  methods: {
    handleSubmit(row) {
      this.currentRow = row;
      // 使用 $nextTick 确保 $refs 已经被正确挂载
      this.$nextTick(() => {
        this.$refs.fileInput.click(); // 触发文件选择对话框
      });
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const filePath = URL.createObjectURL(file);
        console.log('选中文件的路径:', filePath);
        // 你可以在这里处理文件上传逻辑，例如将文件上传到服务器
        // 并将路径或文件数据与当前行关联
      }
      // 清空文件输入，以便再次选择相同文件时触发change事件
      this.$refs.fileInput.value = null;
    }
  }
};
</script>
